<template>
  <div class="pi-tree">
    <el-input v-model="keyword" style="width: 240px" placeholder="请输入" @input="onChanged" />
    <el-tree
      ref="treeRef"
      highlight-current
      :indent="24"
      :item-size="24"
      default-expand-all
      show-checkbox
      draggable
      :filter-node-method="filterMethod"
      :="$attrs"
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <div
            class="label"
            :class="{ highlight: keyword && node.label?.includes(keyword) }"
            :title="node.label"
          >
            <slot name="icon">
              <el-icon v-if="!node.icon" color="var(--el-color-primary)">
                <Opportunity />
              </el-icon>
            </slot>
            <span style="padding-left: 4px">{{ node.label }}</span>
          </div>
          <el-space class="action" v-if="false">
            <el-icon color="var(--el-color-primary)" @click.stop="openAppend(data)">
              <Plus />
            </el-icon>
            <el-dropdown placement="bottom-start" @command="clickDropdown">
              <el-icon color="var(--el-color-primary)" style="transform: rotate(90deg)">
                <MoreFilled />
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="{ type: 'edit', data }">编辑</el-dropdown-item>
                  <el-dropdown-item :command="{ type: 'remove', data }">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-space>
        </div>
      </template>
    </el-tree>
    <AddClassify
      v-model:visible="showAddClassify"
      :currNodeData
      :isEdit
      @handleConfirm="append"
    ></AddClassify>
  </div>
</template>

<script setup name="PiTree">
import { ElMessageBox } from 'element-plus';
import AddClassify from './components/addClassify.vue';

const emit = defineEmits(['remove', 'edit', 'add']);
const treeRef = ref();
const keyword = ref('');
const showAddClassify = ref(false);
const currNodeData = ref({});
const isEdit = ref(false);
const onChanged = (keyword) => {
  treeRef.value?.filter(keyword);
};
const filterMethod = (value, data) => {
  if (!value) return true;
  return data.label.includes(value);
};
const openAppend = (data) => {
  isEdit.value = false;
  currNodeData.value = data;
  showAddClassify.value = true;
};
// 新建节点
const append = () => {
  isEdit.value ? emit('edit', currNodeData.value) : emit('add', currNodeData.value);
  // const children = currNodeData.value.children || [];
  // children.push({
  //   id: `${currNodeData.value.id}-${children.length + 1}`,
  //   label: name,
  //   children: [],
  // });
};
// 点击编辑按钮
const openEdit = (data) => {
  isEdit.value = true;
  currNodeData.value = data;
  showAddClassify.value = true;
};
// 点击删除按钮
const openRemove = (data) => {
  ElMessageBox.confirm(`确定要删除 ${data.label} 节点吗？`, '删除', {
    type: 'warning',
    callback: (action) => {
      if (action === 'confirm') {
        emit('remove', data);
        console.log(`output->action`, action);
      }
    },
  });
};
// 点击下拉选项时触发事件
const clickDropdown = (command) => {
  const { type, data } = command;
  switch (type) {
    case 'edit':
      openEdit(data);
      break;
    case 'remove':
      openRemove(data);
      break;
    default:
      isEdit.value = false;
      break;
  }
};
defineExpose({
  treeRef,
});
</script>

<style scoped lang="less">
.pi-tree {
  height: calc(100% - 40px);
  .el-tree {
    margin-top: 10px;
    height: 100%;
    overflow-x: auto;
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
      .label {
        display: flex;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 8px;
      }
    }
    :deep(.el-tree-node) {
      &.is-expanded > .el-tree-node__children {
        overflow: visible !important;
      }
      .el-tree-node__content {
        &:hover {
          background-color: var(--el-color-primary-light-9);
        }
      }
    }
  }
  .highlight {
    color: red;
  }
}
</style>
